<template>
    <div class = 'login_container'>
        <div class="login_box">
            <div class="avatar_box">
                <img src="../assets/logo.png" alt="">
            </div>
                <el-form class='input' :model = 'form' :rules = "loginrules" ref = "loginFormRef">
                      <el-form-item prop = "username">
                          <el-input prefix-icon = 'el-icon-user' v-model = 'form.username'></el-input>
                      </el-form-item>
                      <el-form-item prop = "password">
                          <el-input type= "password" prefix-icon = 'el-icon-lock' v-model = 'form.password'></el-input>
                      </el-form-item>
                      <el-form-item class='btns'>
                          <el-button type="primary" @click = "login">登陆</el-button>
                          <el-button type="info" @click = "resetFields">重置</el-button>
                      </el-form-item>
              </el-form>
          </div>
    </div>
</template>

<script>
export default {
  data () {
    return {

      form: {
        username: 'admin',
        password: '123456'

      },
      // 这是表单验证规则对象
      loginrules: {
        // 验证用户名是否合法
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }, {
          min: 3,
          max: 10,
          message: '长度在3到10字符之间',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入登陆密码',
          trigger: 'blur'
        }, {
          min: 6,
          max: 15,
          message: '长度在6到15字符之间',
          trigger: 'blur'
        }]

      }
    }
  },
  methods: {
    resetFields () {
      // this指向对象,
      this.$refs.loginFormRef.resetFields()
    },
    login () {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) {
          return
        }
        // 将data重命名为res，然后读取res.meta.status判断是否操作成功
        const {
          data: res
        } = await this.$http.post('login', this.form)
        if (res.meta.status !== 200) {
          return this.$message.error('登陆失败')
        }
        this.$message.success('登陆成功')
        console.log(res)
        window.sessionStorage.setItem('token', res.data.token)
        this.$router.push('/home')
      })
    }
  }

}
</script>

<style scoped>
    .login_container {
        background-color: #2b4b6b;
        height: 100%;
    }

    .login_box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
    }

    .login_box .avatar_box {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 1px;
        box-shadow: 0 0 10px #ddd;
    }

    .login_box .avatar_box img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
    }

    .login_box .input {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .login_box .btns {
        display: flex;
        justify-content: flex-end;
    }
</style>
